
<template>
  <view class="my page">
    <view class="top-bg"></view>
    <view class="mine-user" @tap="handleNavUserInfo">
      <view class="mine-user_left">
        <image class="l-img" :src="'my/avatar.png' | prefixOssUrl" alt="">
        <text class="l-name">{{ isLogin ? 'HI,'+(getObjVal(info, '_raw.member.nickname')) : '立即登录' }}</text>
      </view>
      <text class="iconfont">&#xe628;</text>
    </view>

    <view class="mine-tabs">
      <view class="mine-tabs-item" @tap="nav('/subpackage/order-form/pages/list/index?index=0')">
        <text class="mine-tabs-item__top iconfont">&#xe600;</text>
        <text class="mine-tabs-item__btm">全部订单</text>
      </view>
      <view class="mine-tabs-item" @tap="nav('/subpackage/order-form/pages/list/index?index=1')">
        <text class="mine-tabs-item__top iconfont">&#xe612;</text>
        <text class="mine-tabs-item__btm">待支付</text>
      </view>
      <view class="mine-tabs-item" @tap="nav('/subpackage/order-form/pages/list/index?index=2')">
        <text class="mine-tabs-item__top iconfont">&#xe601;</text>
        <text class="mine-tabs-item__btm">待发货</text>
      </view>
      <view class="mine-tabs-item" @tap="nav('/subpackage/order-form/pages/list/index?index=3')">
        <text class="mine-tabs-item__top iconfont">&#xe6a1;</text>
        <text class="mine-tabs-item__btm">已完成</text>
      </view>
    </view>

    <view class="mine-main">
      <view class="mine-main_item" @tap="nav('/subpackage/user/pages/address/index')">
        <view class="i-left">
          <image class="i-left_img" :src="'my/adress.png' | prefixOssUrl" alt="">
          收货地址
        </view>
        <text class="iconfont">&#xe628;</text>
      </view>
      <view class="mine-main_item" @click="isPopupShow = true">
        <view class="i-left">
          <image class="i-left_img" :src="'my/contact.png' | prefixOssUrl" alt="">
          联系客服
        </view>
        <text class="iconfont">&#xe628;</text>
      </view>
    </view>
    <view class="mask" v-if="isPopupShow"></view>
    <view class="popup" v-if="isPopupShow">
      <image class="p-img" :src="'background/contract.png' | prefixOssUrl" alt="" />
      <view class="iconfont close" @tap="isPopupShow = false">&#xe611;</view>
      <view class="p-title">全国统一咨询热线</view>
      <view class="p-number">
        <text class="iconfont n-phone">&#xe61f;</text>400-8953068
      </view>
      <view class="p-btn">
        <button class="consult" open-type="contact">在线咨询</button>
        <view class="call" @tap="call">立即拨打</view>
      </view>
    </view>
    <card-scan @toBindCard="isBindCardShow = $event"></card-scan>
    <card-bind :show="isBindCardShow" @cancel="isBindCardShow = $event"></card-bind>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import cardBind from '@/components/ljf/card/bind.vue';
import cardScan from '@/components/ljf/card/scan.vue';

export default {
  components: {
    cardBind,
    cardScan
  },
  data() {
    return {
      isPopupShow:false,
      isBindCardShow:false
    }
  },
  onPullDownRefresh() {
    if (!this.isLogin) {
      uni.stopPullDownRefresh();
      return;
    }
    this.getUserInfo().then(() => {
      uni.stopPullDownRefresh();
    });
  },
  computed: {
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    handleNavUserInfo() {
      if(!this.isLogin) {
        this.nav('/pages/login/index');
      }else {
        this.nav('/subpackage/user/pages/account/index');
      }
    }
  },
};
</script>

<style lang="less" scoped>
.my {
  min-height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #f7f7f7;

  .top-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 220rpx;
    padding: 0 30rpx;
    background: linear-gradient(0deg, #ff6f04, #ff3c2c);
    z-index: 0;
  }

  .mine-user {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    color: #fff;
    box-sizing: border-box;

    &_left {
      .layout_flex(@a: center);

       .l-img {
        width: 108rpx;
        height: 108rpx;
        border-radius: 50%;
      }
      .l-name {
        .textOverflow(1);
        margin-left: 30rpx;
        font-size: 38rpx;
      }
    }

    .iconfont {
      font-size: 42rpx;
    }
  }

  .mine-tabs {
    position: relative;
    z-index: 20;
    margin: 30rpx;
    .layout_flex();
    flex-wrap: wrap;
    background: #fff;
    border-radius: 10rpx;
    overflow: hidden;

    &-item {
      .layout_flex(@d: column, @a: center, @j: center);
      padding: 40rpx 0;
      flex: 1;

      &__top {
        font-size: 48rpx;
        color: #333;
      }

      &__btm {
        margin-top: 20rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #666666;
      }
    }
  }
  .mine-main {
    position: relative;
    z-index: 20;
    margin: 30rpx;
    background: #fff;
    border-radius: 10rpx;
    overflow: hidden;

    &_item {
      flex: 1;
      .layout_flex(@a: center, @j: space-between);
      padding: 30rpx;
      
      .i-left {
        .layout_flex(@a: center, @j: center);
        font-size: 30rpx;
        color: #333;
        &_img {
          width: 54rpx;
          height: 54rpx;
          margin-right: 20rpx;
          border-radius: 50%;
        }
      }

    }
  }

  .mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .popup {
    position: fixed;
    left: 10%;
    top: 18%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 600rpx;
    height: 660rpx;
    border-radius: 20rpx;
  
    .close {
      position: absolute;
      right: 5%;
      top: 5%;
      font-size: 50rpx;
      color: #999;
    }

    .p-img {
      position: absolute;
      width: 600rpx;
      height: 660rpx;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
    }

    .p-title {
      position: absolute;
      height: 35rpx;
      top: 400rpx;
      font-size: 30rpx;
      text-align: center;
      line-height: 35rpx;
      color: #333;
    }

    .p-number {
      position: absolute;
      top: 440rpx;
      width: 460rpx;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      font-size: 48rpx;
      font-weight: bold;
      color: #ff3d2b;

      .n-phone {
        margin-right: 10rpx;
        font-size: 45rpx;
      }
    }

    .p-btn {
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #fff;
      width: 600rpx;
      height: 120rpx;
      font-size: 36rpx;
      border-bottom-left-radius: 30rpx;
      border-bottom-right-radius: 30rpx;

      .consult {
        width: 200rpx;
        height: 60rpx;
        margin: 0;
        padding: 0;
        font-size: 36rpx;
        font-weight: bold;
        color: #666;
        line-height: 60rpx;
        background: transparent;
        border-radius: 10rpx;
        
        &::after {
          border-color: transparent;
        }
      }

      .call {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200rpx;
        height: 60rpx;
        font-weight: bold;
        color: #333;
      }
    }
  }

}
</style>
